<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script><script src="../lazyimg.js"></script>
      <script>
  $(function(){
  var lazyloadImg = new LazyloadImg({
            el: '.weui-updown [data-src]', //匹配元素
            top: 50, //元素在顶部伸出长度触发加载机制
            right: 50, //元素在右边伸出长度触发加载机制
            bottom: 50, //元素在底部伸出长度触发加载机制
            left: 50, //元素在左边伸出长度触发加载机制
            qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
            load: function(el) {
                el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
            },
            error: function(el) {

            }
        });
	  });    
     
      </script>
</head>

<body ontouchstart class="page-bg">
<div class="page-hd">
        <h1 class="page-hd-title">
            懒加载图片
        </h1>
        <p class="page-hd-desc">需要加载lazyimg.js</p>
    </div>
<div class="weui_cells">
     <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft">渐显.weui-updown</div>
            </div>
  
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft">左边图片都是懒加载</div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                      
      <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                 
      <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/1.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div> 
        <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/2.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>   
       <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p class='weui-updown'>
<img   src="" data-src="http://7xr193.com1.z0.glb.clouddn.com/3.jpg" height='100' />
       </p>
                </div>
                <div class="weui_cell_ft"></div>
            </div>                 
        
        
        </div>
</body>
</html>
